<template>
  <div class="  max-w-screen-x1">
    <!-- 用户信息 -->
    <div class="fix   p-50 text-white">
      <div class="fix ">
        <div class="  fix ">
          <i class="fa fa-user text-3xl"></i>
        </div>
        <div class="ml-200">
          <h3 class="font-black fix" v-if="isLoggedIn">{{ userInfo.username }}</h3>
          <h3 class="font-medium" v-else @click="goToLogin">点击登录</h3>
          <div class="text-sm text-white/80 mt-1">
            <span v-if="isLoggedIn">{{ userInfo.phone }}</span>
            <span v-else>未登录</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 功能入口 -->
    <div class="bg-white mt-3 grid grid-cols-4 gap-1 p-1">
      <div class="fix flex-col items-center py-4 cursor-pointer">
        <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
          <i class="fa fa-credit-card text-red-500"></i>
        </div>
        <span class="text-xs mt-2">我的钱包</span>
      </div>
      <div class="fix flex-col items-center py-4 cursor-pointer">
        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
          <i class="fa fa-ticket text-blue-500"></i>
        </div>
        <span class="text-xs mt-2">我的优惠券</span>
      </div>
      <div class="fix flex-col items-center py-4 cursor-pointer">
        <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center">
          <i class="fa fa-star-o text-orange-500"></i>
        </div>
        <span class="text-xs mt-2">我的收藏</span>
      </div>
      <div class="fix flex-col items-center py-4 cursor-pointer">
        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
          <i class="fa fa-comment-o text-purple-500"></i>
        </div>
        <span class="text-xs mt-2">我的评价</span>
      </div>
    </div>

    <!-- 设置列表 -->
    <div class="bg-white mt-3">
      <div class="divide-y">
        <div class="fix px-4 py-3 flex justify-between items-center cursor-pointer">
          <div class="fix items-center">
            <i class="fa fa-map-marker text-primary-500 mr-3"></i>
            <span>地址管理</span>
          </div>
          <i class="fa fa-chevron-right text-gray-400"></i>
        </div>
        <div class="px-4 py-3 flex justify-between items-center cursor-pointer">
          <div class="flex items-center">
            <i class="fa fa-bell-o text-primary-500 mr-3"></i>
            <span>消息通知</span>
          </div>
          <i class="fa fa-chevron-right text-gray-400"></i>
        </div>
        <div class="px-4 py-3 flex justify-between items-center cursor-pointer">
          <div class="flex items-center">
            <i class="fa fa-cog text-primary-500 mr-3"></i>
            <span>设置</span>
          </div>
          <i class="fa fa-chevron-right text-gray-400"></i>
        </div>
      </div>
    </div>

    <!-- 关于我们 -->
    <div class="bg-white mt-3">
      <div class="divide-y">
        <div class="px-4 py-3 flex justify-between items-center ">
          <div class="fix items-center">
            <i class="fa fa-question-circle-o text-primary-500 mr-3"></i>
            <span>帮助中心</span>
          </div>
          <i class="fa fa-chevron-right text-gray-400"></i>
        </div>
        <div class="px-4 py-3 flex justify-between items-center cursor-pointer">
          <div class="fix items-center">
            <i class="fa fa-phone text-primary-500 mr-3"></i>
            <span>联系客服</span>
          </div>
          <i class="fa fa-chevron-right text-gray-400"></i>
        </div>
        <div class="px-4 py-3 flex justify-between items-center cursor-pointer">
          <div class="fix items-center">
            <i class="fa fa-info-circle text-primary-500 mr-3"></i>
            <span>关于我们</span>
          </div>
          <i class="fa fa-chevron-right text-gray-400"></i>
        </div>
      </div>
    </div>

    <!-- 退出登录按钮 -->
    <div class="px-6 py-4 mt-6">
      <button
          class="w-full py-3 bg-white border border-red-500 text-red-500 rounded-full font-medium"
          v-if="isLoggedIn"
          @click="logout"
      >
        退出登录
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 用户状态
const isLoggedIn = ref(false)
const userInfo = ref({
  username: '张三',
  phone: '13800138000'
})

// 生命周期钩子
const checkLoginStatus = () => {
  // 从本地存储检查登录状态
  const token = localStorage.getItem('token')
  isLoggedIn.value = !!token
}

// 登录相关
const goToLogin = () => {
  router.push({ name: 'Login' })
}

const logout = () => {
  // 清除本地存储中的token
  localStorage.removeItem('token')
  isLoggedIn.value = false
  alert('已退出登录')
}
</script>